iT邦幫忙

2022 iThome 鐵人賽

DAY 4
0
Modern Web

30天UIUX自學之路系列 第 4

Day 04 來做Landing page吧!

  • 分享至 

  • xImage
  •  

今日的發現:
發現做daily ui的好處,它有非常多樣性的UI設計題目,像是昨天DAY2是設計信用卡確認頁面(關於金融)、今天Landing page(關於行銷):

我都必須事先學習與查找資料,了解到這個頁面是「做什麼」的、「使用者是誰」(了解受眾),才能做出相關的設計,像是Landing page會有的CTA(Call to Action)是什麼呢?通常是看完這個網站,會將人導向購買或註冊...等行為的按鈕,這些相關知識都必須先做功課。


實作流程:
晚上肚子好餓想吃Pizza,就來做PIZZA的landing page頁面,

  1. 查看Behance、Dribble上的daily UI範例,看看頁面架構大約需要那些元素
  2. 畫出線稿、並且打開figma開始著手
  3. 看pizza網站(像是達x樂、必x客等平成我會訂購的網頁,從f12看他們的排版及自己大小等等)

秀一下成果:
https://ithelp.ithome.com.tw/upload/images/20220919/20151451aH2tsIpBVJ.jpg

感謝unsplash這款無授權圖庫,讓我有超漂亮的照片能夠挑選


今日心得:
想當年課堂作網站幾乎都沒在考慮物件的大小與比例,都是看順眼用css微調而已,但實際去看企業的網頁與網路上其他設計師關於字體大小的說明,原來是以這樣的比例。

接下來要花時間看看design guide了,今天做圖時也比前幾天有概念,開始用css間距的方式設計,而不是只有把圖文放一放(腦袋有一直在算比例、這樣要怎麼切板等等)。

雖然做得很慢,但還是要繼續加油!/images/emoticon/emoticon18.gif


上一篇
DAY3 信用卡付款介面製作
下一篇
Day 05 來做計算機吧
系列文
30天UIUX自學之路30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言